<template>
  <section class="content-view">
    <h2 class="item-title">基础使用</h2>
    <HHeader>
      <div slot="left" class="hips-header-btn">左侧区域</div>
      <div slot="center">中间区域</div>
      <div slot="right" class="hips-header-btn">右侧区域</div>
    </HHeader>

    <h2 class="item-title">改变样式/增加边框</h2>
    <HHeader class="border-bottom-line" style="background: #1F8CEB; color: #fff">
      <div slot="left" class="hips-header-btn">左侧区域</div>
      <div slot="center">中间区域</div>
      <div slot="right" class="hips-header-btn">右侧区域</div>
    </HHeader>

    <h2 class="item-title">多个按钮</h2>
    <HHeader>
      <div slot="left" class="hips-header-btn">🌚</div>
      <div slot="left" class="hips-header-btn">👻</div>
      <div slot="center">标题</div>
      <div slot="right" class="hips-header-btn">😀</div>
      <div slot="right" class="hips-header-btn">😄</div>
    </HHeader>

    <h2 class="item-title">默认比例 left:center:right 为 1:2:1</h2>
    <HHeader>
      <div slot="center">标题过长会隐藏后面的文字字字字字字字字字字字字字字</div>
    </HHeader>

    <h2 class="item-title">更改比例 left:center:right 为 0:1:0</h2>
    <HHeader :proportion="[0,1,0]">
      <div slot="center">标题过长会隐藏后面的文字字字字字字字字字字字字字字</div>
    </HHeader>

  </section>
</template>

<script>
import { HHeader } from '&'

export default {
  components: {
    HHeader,
  },
}
</script>
